<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ChannelUtils, getChannelName } from '@/utils/channel';
import { ChannelService } from '@/service/channel';
import { showLoading, hideLoading, showToast } from '@tarojs/taro';

definePageConfig({
    navigationBarTitleText: '医院列表'
});

interface HospitalItem {
    id: string;
    name: string;
    address?: string;
    phone?: string;
    [key: string]: any;
}

interface HospitalListResponse {
    records: HospitalItem[];
    total: number;
    size: number;
    current: number;
    pages: number;
}

const hospitalList = ref<HospitalItem[]>([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const channelInfo = ref<any>(null);

onMounted(() => {
    channelInfo.value = ChannelUtils.getChannelInfo();
    loadHospitalList();
});

async function loadHospitalList(page: number = 1) {
    if (loading.value) return;
    
    loading.value = true;
    showLoading({ title: '加载中...' });
    
    try {
        const result = await ChannelService.getHospitalListByChannel(page, pageSize.value);
        
        if (result) {
            hospitalList.value = result.records || [];
            total.value = result.total || 0;
            currentPage.value = page;
            
            if (hospitalList.value.length === 0) {
                showToast({
                    title: '暂无医院数据',
                    icon: 'none'
                });
            }
        } else {
            showToast({
                title: '获取医院列表失败',
                icon: 'error'
            });
        }
    } catch (error) {
        // 加载医院列表失败
        showToast({
            title: '加载失败',
            icon: 'error'
        });
    } finally {
        loading.value = false;
        hideLoading();
    }
}

async function loadHospitalListByArea(area: string) {
    if (loading.value) return;
    
    loading.value = true;
    showLoading({ title: '加载中...' });
    
    try {
        const result = await ChannelService.getHospitalListByChannelAndArea(area, 1, pageSize.value);
        
        if (result) {
            hospitalList.value = result.records || [];
            total.value = result.total || 0;
            currentPage.value = 1;
            
            if (hospitalList.value.length === 0) {
                showToast({
                    title: '该区域暂无医院数据',
                    icon: 'none'
                });
            }
        } else {
            showToast({
                title: '获取医院列表失败',
                icon: 'error'
            });
        }
    } catch (error) {
        // 根据区域加载医院列表失败
        showToast({
            title: '加载失败',
            icon: 'error'
        });
    } finally {
        loading.value = false;
        hideLoading();
    }
}

function onPageChange(page: number) {
    loadHospitalList(page);
}

function onHospitalClick(hospital: HospitalItem) {
    // 点击医院
    // 这里可以跳转到医院详情页面
    showToast({
        title: `选择了${hospital.name}`,
        icon: 'success'
    });
}

function refreshList() {
    loadHospitalList(1);
}
</script>

<template>
    <view class="p-4">
        <!-- 渠道信息 -->
        <view v-if="channelInfo?.channelId" class="mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
            <view class="text-sm font-bold text-blue-800 mb-1">
                渠道来源: {{ getChannelName(channelInfo.channelId) }} ({{ channelInfo.channelId }})
            </view>
            <view class="text-xs text-blue-600">
                根据渠道为您推荐相关医院
            </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="flex gap-2 mb-4">
            <button 
                class="bg-blue-500 text-white px-4 py-2 rounded text-sm" 
                @click="loadHospitalListByArea('北京')"
                :disabled="loading"
            >
                北京地区
            </button>
            <button 
                class="bg-green-500 text-white px-4 py-2 rounded text-sm" 
                @click="loadHospitalListByArea('上海')"
                :disabled="loading"
            >
                上海地区
            </button>
            <button 
                class="bg-purple-500 text-white px-4 py-2 rounded text-sm" 
                @click="refreshList"
                :disabled="loading"
            >
                刷新列表
            </button>
        </view>
        
        <!-- 医院列表 -->
        <view class="space-y-3">
            <view v-if="hospitalList.length === 0 && !loading" class="text-center py-8 text-gray-500">
                <view class="text-lg mb-2">暂无医院数据</view>
                <view class="text-sm">请尝试切换地区或刷新列表</view>
            </view>
            
            <view 
                v-for="hospital in hospitalList" 
                :key="hospital.id"
                class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm"
                @click="onHospitalClick(hospital)"
            >
                <view class="flex justify-between items-start mb-2">
                    <view class="font-bold text-lg text-gray-800">{{ hospital.name }}</view>
                    <view class="text-xs text-blue-500 bg-blue-50 px-2 py-1 rounded">
                        渠道推荐
                    </view>
                </view>
                
                <view v-if="hospital.address" class="text-sm text-gray-600 mb-2">
                    <view class="flex items-center">
                        <view class="i-local-location w-4 h-4 mr-1"></view>
                        {{ hospital.address }}
                    </view>
                </view>
                
                <view v-if="hospital.phone" class="text-sm text-gray-600">
                    <view class="flex items-center">
                        <view class="i-local-phone w-4 h-4 mr-1"></view>
                        {{ hospital.phone }}
                    </view>
                </view>
                
                <!-- 其他医院信息 -->
                <view v-if="hospital.description" class="mt-2 text-xs text-gray-500">
                    {{ hospital.description }}
                </view>
            </view>
        </view>
        
        <!-- 分页信息 -->
        <view v-if="total > 0" class="mt-4 text-center text-sm text-gray-600">
            <view>共 {{ total }} 家医院，当前第 {{ currentPage }} 页</view>
            <view class="flex justify-center gap-2 mt-2">
                <button 
                    class="px-3 py-1 bg-gray-200 rounded text-sm"
                    @click="onPageChange(currentPage - 1)"
                    :disabled="currentPage <= 1 || loading"
                >
                    上一页
                </button>
                <button 
                    class="px-3 py-1 bg-gray-200 rounded text-sm"
                    @click="onPageChange(currentPage + 1)"
                    :disabled="currentPage >= Math.ceil(total / pageSize) || loading"
                >
                    下一页
                </button>
            </view>
        </view>
        
        <!-- 加载状态 -->
        <view v-if="loading" class="text-center py-4 text-gray-500">
            <view class="text-sm">加载中...</view>
        </view>
    </view>
</template>

<style scoped></style>
